<template>
  <van-skeleton title avatar :row="3" :loading="props.loading" v-for="user in props.userList">
    <van-card
        :title="user.username"
        :desc="user.profile"
        style="border-radius: 15px;background-color: #e8e8e8"
        @click="showUserDetail(user?.id)"
    >
      <template #thumb>
        <van-image :src="user?.avatarUrl" round width="88" height="88"/>
      </template>
      <template #tags>
        <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 8px; margin-top: 8px">
          {{ tag }}
        </van-tag>
      </template>
      <template #price>
        <van-icon name="phone-o" style="">{{ ':' + user.phone }}</van-icon>
      </template>
      
    </van-card>
  </van-skeleton>
</template>

<script setup lang="ts">
import {UserType} from "../models/user";
import {useRouter} from "vue-router";

const router=useRouter();

interface UserCardListProps {
  loading: boolean;
  userList: UserType[];
}
const showUserDetail=(id: any)=>{
  router.push({
    path:"/user/detail",
    query:{
      id:id
    }
  })
}
const props = withDefaults(defineProps<UserCardListProps>(), {
  loading: true,
  // @ts-ignore
  userList: [] as UserType[],
});

</script>

<style scoped>

</style>
